<template>
  <div class="fns-dialog-component">
	<el-dialog
			:class="[dialogData.size, dialogData.title === '删除' || dialogData.title === '停用' || dialogData.title === '重置' || dialogData.title === '取消' || dialogData.title === '失效'  ? 'isShowHead' : '']"
			:title="dialogData.title"
			:visible.sync="dialogData.dialogVisible"
			width="40%"
			:close-on-click-modal="false">
	  <slot name="body"></slot>
	  <span slot="footer" class="dialog-footer" v-if="dialogData.showBackBtn">
        <el-button  @click="dialogData.dialogVisible = false">关 闭</el-button>
      </span>
	  <span slot="footer" class="dialog-footer" v-else>
        <el-button @click="dialogData.dialogVisible = false">{{ dialogData.btnLeft}}</el-button>
        <el-button type="primary" @click="submitForm">{{ dialogData.btnRight}}</el-button>
      </span>
	</el-dialog>
  </div>
</template>

<script>
  export default {
	props: {
	  dialogData: {
		title: {
		  default: ''
		},
		dialogVisible: {
		  default: false
		},
		btnLeft: {
		  default: '取 消'
		},
		btnRight: {
		  default: '提 交'
		},
		showBackBtn: {
		  default: false
		}
	  }
	},
	computed: {},
	watch: {},
	components: {},
	data() {
	  return {}
	},
	methods: {
	  submitForm() {
		this.$emit('submitForm', this.dialogData.title)
	  }
	}
  }
</script>

<style lang="scss">
@import "../../styles/variables";
  /*弹窗组件dialog*/
  .fns-dialog-component {

		.el-dialog {
			border-radius: 8px;
		}
  	.el-form-item {
  		margin-bottom: 20px;
  		&.is-success {
  			.el-input__inner {
  				border-color: #dcdfe6;
  			}
  		}
  		.el-form-item__label {
  			color: #666;
  		}
  		/* 0
  		.is-disabled {
  			.el-input__inner {
  			  			color: #555555 !important;
  			  			cursor: auto !important;
  			}
  		} */
  	}

  	// 弹框里小标题样式
  	.tips-title {
			margin-bottom: 20px;
			font-size: $sizeLarge;
			color: $colorForm;
			&:before {
				display: inline-block;
				margin-right: 6px;
				width: 3px;
				height: 17px;
				background-color: $popupHeaderBg;
				vertical-align: sub;
				content: "";
			}
		}
  	// label文字超过4个的样式
    .more-text > label {
      line-height: 18px;
    }
    // 必填字段*号（右侧）
    .el-form-item.is-required .el-form-item__label {
			position: relative;
			&:after {
				position: absolute;
				top: 1px;
				right: 4px;
				font-size: 18px;
				color: #f26e6e;
				content: "*";
			}
		}
		// 隐藏组件默认的左侧*必填图标
		.el-form-item.is-required .el-form-item__label::before {
			display: none;
			content: '';
		}
		.isShowHead {
		  .el-dialog__header {
				display: none;
		  }
		}
		// 弹框头部
		.el-dialog__header {
		  display: block;
		  padding: 0 20px;
		  height: 46px;
		  line-height: 46px;
		  background-color: $popupHeaderBg;
		  border-top-left-radius: 8px;
		  border-top-right-radius: 8px;

		  .el-dialog__title {
			color: $colorWhite;
			font-size: $sizeLarge;
		  }
		  .el-dialog__headerbtn {
			top: 14px;
			right: 25px;
			.el-dialog__close {
			  color: #fff;
			}
		  }
		}
		// 弹框底部：按钮
		.el-dialog__footer {
		  text-align: center;
		  .el-button {
		  	min-width: 100px;
		  	line-height: 20px;
		  	border-radius: 8px;
		  	&:not(:last-child) {
		  		margin-right: 25px;
		  	}
		  	&.el-button--primary {
		  		// background-color: $btnBgcBase;
		  		// border: $btnBgcBase;
		  	}
		  }
		}

		// 大、中、小弹框公共样式
		.el-dialog__body {
		  padding: 20px 25px 10px 25px !important;
		}
		.el-select {
		  width: 100%;
		}
		.el-form {
		  overflow-y: auto;
		  overflow-x: hidden;
		}

		// 特大号弹框
		.bg {
		  .el-dialog {
				width: 1200px !important;overflow: auto;min-width: 1200px;
				.el-form {
				  max-height: 450px;
				}
				.el-form-item__content {
					width: 200px;
				}
				// 大弹框三列的样式
				.el-form-item {
					display: inline-block;
					margin-right: 40px;
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
				// 两列的宽度：输入框、下拉选择框
				.wid-md {
					margin-right: 20px;
					.el-form-item__content {
						width: 516px;
					}
				}
				// 小于1列的宽度（带有单位）
				.wid-small {
					.el-input {
						width: 140px;
					}
					.unit {
						color: #999;
					}
				}
		  }
		}
		// 大号弹框
		.lg {
		  .el-dialog {
			width: 980px !important;
			.el-dialog__body {
		  //padding: 30px 20px !important;
		}
			.el-form {
			  max-height: 450px;
			}
			.el-form-item__content {
			  width: 200px;
			}
			// 大弹框三列的样式
			.el-form-item {
			  display: inline-block;
			  margin-right: 30px;
			 /*  &:nth-child(3n) {
			  				margin-right: 0;
			  } */
			}
			// 表单label宽度
			.el-form-item__label {
				width: 71px !important;
				// line-height: 25px;
			}
			// 宽度：输入框、选择框
			.el-form-item__content {
				margin-left: 71px !important;
			}
			// 两列的宽度：输入框、下拉选择框
			.wid-md {
			  margin-right: 30px;
			  .el-form-item__content {
				width: 505px;
			  }
			}
			// 小于1列的宽度（带有单位）
			.wid-small {
			  .el-input {
				width: 140px;
			  }
			  .unit {
				color: #999;
			  }
			}
		  }
		}
		// 中号弹框
		.md {
		  .el-dialog {
				width: 780px !important;
				.el-form {
				  max-height: 380px;
				}
				.el-dialog__body {
					max-height: 430px;
					overflow-y: auto;
				}
				.el-form-item {
					display: inline-block;
					margin-bottom: 20px;
					margin-right: 40px;
					&:nth-child(2n) {
						margin-right: 0;
					}
				}
				// 表单label宽度
				.el-form-item__label {
					width: 72px !important;
				}
				// 宽度：输入框、选择框
				.el-form-item__content {
					margin-left: 72px !important;
					width: 250px;
				}
				// 两列的宽度
				.wid-md {
					.el-form-item__content {
						width: 617px;
					}
				}
		  }
		}
		// 小号弹框
		.sm {
		  .el-dialog {
			width: 400px!important;
			min-height: 160px;
			.el-form {
			  max-height: 320px;
			}
			// 提示文字位置
			.el-dialog__body > div {
				// margin: 0 0 10px 0;
				// margin-top: 0 !important;
				line-height: 60px;
				color: $colorForm;
			}
			// 图标位置
			.iconfont {
				margin-right: 6px;
			}
			// 小弹框按钮更小
			.el-button {
				padding-top: 3px;
				padding-bottom: 5px;
				min-width: 80px;
				width: 80px !important;
				border-radius: 4px;
			}
		  }
		}

		// 输入框、选择框、文本框样式
		.el-input__inner {
			// border-color: #D9D9D9 !important;
		}
		.el-select .el-input .el-select__caret {
			// color: #808080;
		}

		.el-input.is-disabled {
			// 表单不可编辑时，隐藏下拉列表箭头
			.el-input__icon {
				display: none;
			}
			// 表单不可编辑时，调整字体颜色
			.el-input__inner {
				color: $colorBase !important;
				cursor: auto;
			}
		}
		.el-radio.is-disabled {
			.el-radio__label {
				color: $colorBase !important;
				cursor: auto;
			}
		}
		.el-radio__input.is-disabled.is-checked .el-radio__inner {
			background: #909399;
			border-color: #909399;
		} 
		.el-textarea.is-disabled {
			.el-textarea__inner {
				color: $colorBase !important;
				cursor: auto;
			}
		}
		.el-cascader.is-disabled {
			.el-cascader__label {
				color: $colorBase !important;
				cursor: auto;
			}
		}
		.el-tag--info, .el-tag--info .el-tag__close {
			color: $colorBase !important;
		}
		.el-range-editor.is-disabled input {
			color: $colorBase !important;
		}
		.el-range-editor.is-disabled .el-range-separator {
			color: $colorBase !important;
		}
  }
</style>
